<template>
  <div>
    <div style="height: 0px">
      <strong style="display: block; margin-top: 10px; text-align: center; font-size: 40px"
        >大风预警</strong
      >
    </div>
    <div class="box">
      <div class="chart">
        <div id="charts" ref="chart">
          <!-- 显示 图片 -->
          <img :src="windImageUrl" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getwindData } from "@/api/user/wind.js";
import { onMounted, onUnmounted, ref, reactive, watch } from "vue";

export default {
  name: "wind",
  props: {
    totalData: {
      default: null,
    },
  },
  created() {
    this.$emit("changeTimeIndex", 9);
    this.$emit("changeIsSelect2", false);
    this.$emit("changeIsSelect3", false);
    this.$emit("changeIsTimeOperator", true);
  },

  setup(props) {
    const windImageUrl = ref("");
    const totalData = reactive(props.totalData);
    console.log(totalData, "111");

    let params = {
      year: 2023,
      month: 8,
      day: 2,
      hour: 8,
      predict: 10,
    };

    watch(
      () => props.totalData,
      (newVal) => {
        console.log("totalData 发生了更改", newVal);
        totalData.value = newVal;
        params.year = newVal.startTime.getFullYear();
        params.month = newVal.startTime.getMonth() + 1;
        params.day = newVal.startTime.getDate();
        params.hour = newVal.startTime.getHours();
        params.predict = newVal.predictTime;
        console.log("new params:", params);
        fetchData(params);
      },
      { deep: true }
    );

    onMounted(() => {
      fetchData(params);
    });

    async function fetchData(params) {
      try {
        // // 使用您的API文件中的方法来获取Yuntu图片数据
        const response = await getwindData(params);
        // // 创建一个Blob对象
        let blob = new Blob([response.data], { type: "image/jpg" });
        // // 创建一个对象URL以在<img>标签中显示图像
        let imageUrl = URL.createObjectURL(blob);
        // // 更新组件中的yuntuImageUrl
        console.log(response);
        windImageUrl.value = imageUrl;
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    }
    return {
      windImageUrl,
      totalData,
    };
  },
};
</script>

<style scoped lang="scss">
@media screen and (min-width: 700px) {
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .chart {
    border: 3px double #c7e8ff;
    background-color: #fff;
    margin: 60px;
    width: 53%;
    height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    #charts {
      width: 100%;
      height: 65vh;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      display: block;
    }
  }
}
</style>
